<template>
  <div>
   <!-- 按钮 -->
      <!-- 数据检索组建 -->
      <div class="btns">
      <el-row :gutter="20" >
        <el-col :span="12">
          <el-input placeholder="请输入内容" v-model="param.name" clearable @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="loadapplications"></el-button>
          </el-input>
        </el-col>
        <el-col :span="8" >
          <el-button  type="primary" size="small" icon="el-icon-plus" @click="toAddHandler">添加应用</el-button>
          <el-button type="primary" size="small" @click="toAddditu">应用地区查看</el-button>
           <el-button type="primary"  size="small" icon="el-icon-download" @click="downloadHandler">导出数据</el-button>
        </el-col>
      </el-row>
      </div>
    <!-- /按钮 -->

    <!-- 表格 -->
      <el-table size="small" :data="applications">
      <el-table-column label="名称" prop="name" align="center"></el-table-column>
       <el-table-column label="种类" prop="type" align="center"></el-table-column>
      <el-table-column label="介绍" prop="introduce" align="center"></el-table-column>
      <el-table-column label="email" prop="email" align="center"></el-table-column>
       <el-table-column label="电话" prop="telephone" align="center"></el-table-column>
      <el-table-column label="应用地址" prop="appId" align="center"></el-table-column>
      <el-table-column label="应用重点" prop="appKey" align="center"></el-table-column>
       <el-table-column label="时间" align="center">
            <template slot-scope="scope">
              <p>{{scope.row.createTime | fmtDate}}</p>
            </template>
        </el-table-column>  
      <el-table-column label="经度" prop="longitude" align="center"></el-table-column>
       <el-table-column label="维度" prop="latitude" align="center"></el-table-column>
      <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.secretKey" active-value="true"  inactive-color="#ff4949" active-color="#13ce66">
            </el-switch>
          </template>
        </el-table-column>
     <!-- <el-table-column label="状态">
           <el-switch v-model="scope.row.secretKey" active-value="true" active-color="#13ce66"
              inactive-color="#ff4949"></el-switch>    
        </el-table-column>-->
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              circle
              @click="editHandler(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              circle
              @click="deleteHandler(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
     </el-table>
    <!-- /表格 -->
    <!-- bodyBgImage: 'url(' + require('../assets/applicationimg/bg.jpg') + ')'-->
    <!-- 模态框 -->

    <!-- /模态框 -->
  </div>
</template>
<script>
import { del, get, post} from "@/utils/request";
export default {
  data() {
    return {
      // 参数，用于保存检索的参数
      param: {
        name:""
      },
      
      // 组件模板中需要的数据
      applications: [], 
      key :true
    };
  },
  // 方法或者js的事件处理函数
  methods: {
        deleteHandler(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url="http://39.106.31.187:8888/application/deleteById";
        del(url, { id: row.id }).then((resp) => {
          this.$message({ type: "success", message: resp.message });
          this.loadapplications();
        });
      });
    },
    editHandler(row){
        this.$router.push({
          path:'/application/applicationCreate',
          query:row
        })
    },
    // 跳转
    toAddHandler() {
      this.$router.push("/application/applicationCreate")
    },
    toAddditu(){
         this.$router.push("/dashboard")
    },
    // 查询后台中的应用信息
    loadapplications() {
      let url = "http://39.106.31.187:8888/application/find";
      get(url, this.param).then((resp) => {
        this.applications = resp.data;
      });
    },
        downloadHandler(){
      window.location.href = "http://39.106.31.187:8888/application/download?name="+this.param.name
    },
    // 修改事件处理函数
  },
  // 页面加载的时候会执行的方法
  created() {
    this.loadapplications();
  },
   mounted(){
      // 进来的时候调用添加
        this.setBodyBackGround()
  },
  beforeDestroy(){
      // 离开页面的时候清除
        this.clearBodyBackGround()
  }
}

</script>

<style scoped>
.btns {
  margin-bottom: 0.5em;
  size:"small";
}
</style>